<template>
	<view>
		<!-- 提示 -->
		<view class="tips">
			<text>请输入当前绑定的支付宝信息：</text>
		</view>
		<view class="con">
			<view class="title">
				<text>支付宝账号</text>
			</view>
			<view class="input">
				<input type="number" v-model="phone" placeholder="请输入完整手机号" />
			</view>
		</view>

		<view class="con">
			<view class="title">
				<text>姓名</text>
			</view>
			<view class="input">
				<input v-model="name" placeholder="请输入完整姓名" />
			</view>
		</view>

		<my-bottom-btn :title="title" @clickBtn="clickBtn"></my-bottom-btn>
	</view>
</template>

<script>
	import myBottomBtn from '@/components/common/my-bottom-btn/my-bottom-btn.vue'

	import {
		secureBinding
	} from '@/api/http/main/my/community.js'

	export default {
		components: {
			myBottomBtn
		},
		data() {
			return {
				title: '立即解绑',
				phone: '',
				name: ''
			}
		},
		methods: {
			clickBtn() {
				if (this.phone == '' || this.name == '') {
					return uni.$showMsg('请输入完整数据！');
				}

				secureBinding(this.phone, this.name).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					uni.$showMsg('解绑成功！');
					setTimeout(() => {
						uni.reLaunch({
							url: "/subpkg/main/my/assets/binding/assets-bdtx/assets-bdtx"
						})
					}, 1000)


				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.tips {
		font-size: 28rpx;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fff;
		text {
			/* color: #8B8B8B; */
			color: #8B8B8B;
			margin-left: 20rpx;
		}
	}

	.con {
		width: 100%;
		// display: flex;
		background-color: #fff;
		/* height: 100rpx;
		line-height: 100rpx; */
		font-size: 32rpx;
		// display: grid;
		padding: 10rpx 0;
		margin-bottom: 20rpx;

		.title {
			text {
				margin: 0 20rpx;
			}
		}

		.input {
			input {
				height: 60rpx;
				margin: 20rpx;
				border-bottom: #8B8B8B 1rpx solid;
			}
		}
	}
</style>